<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css" />
	</head>
	<body>
		<div id="app">
			<!--  导航栏  -->
			<div class="navbar">
				<div class="containner flex item-center justify-between">
					<div class="navbar-left flex item-center text-sm">
						<a class="router-link brand red" to="/">学掌门商城</a>
					</div>
					<div class="navbar-right flex item-center justify-end">
						<a class="router-link text-sm gray hover-red" to="/login">
							你好，张三
						</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm red" to="/regist">免费注册</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm gray hover-red" to="/customer/orderlist">我的订单
						</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm gray hover-red" to="/customer/vip">我的会员</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm gray hover-red" to="/customer/address">收货信息
						</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm gray hover-red" to="/website/service">客户服务</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm gray hover-red" to="/website/nav">网站导航</a>
						<div class="navbar-seperate"></div>
						<a class="router-link text-sm gray hover-red" to="/website/mobile">手机学掌门</a>
					</div>
				</div>
			</div>
			<!--  /导航栏  -->
			<!--  搜索栏  -->
			<div class="search-bar containner flex justify-between item-center mt-20">
				<img src="img/logo.png" width="140px" />
				<div class="search-bar-center">
					<div class="flex item-center justify-center">
						<div class="flex item-center">
							<input type="text" class="search-bar-input" placeholder="商品名称、品牌、分类、规格属性……"
								v-model="product.spulist_filter_spu_name" />
							<button class="search-bar-btn hand" @click="search_clicked()">搜索</button>
						</div>
						<button class="search-bar-cart hand ml-20" @click="cart_clicked()">我的购物车</button>
					</div>
					<div class="search-bar-keywords flex justify-around item-center mt-10">
						<div class="hand hover-red red text-sm">春日环游记</div>
						<div class="hand hover-red gray text-sm">iphone 12</div>
						<div class="hand hover-red gray text-sm">小米</div>
						<div class="hand hover-red gray text-sm">榴莲尝鲜</div>
						<div class="hand hover-red gray text-sm">生鲜五折</div>
						<div class="hand hover-red gray text-sm">品质家电</div>
						<div class="hand hover-red gray text-sm">新品激光</div>
						<div class="hand hover-red gray text-sm">春茶</div>
						<div class="hand hover-red gray text-sm">正品农贸</div>
						<div class="hand hover-red gray text-sm">嗨9购了</div>
						<div class="hand hover-red gray text-sm">鱼人节好物</div>
					</div>
					<div class="flex justify-between item-center mt-20">
						<div class="hand hover-red red text-lg">秒杀</div>
						<div class="hand hover-red gray text-lg">优惠券</div>
						<div class="hand hover-red gray text-lg">学掌门会员</div>
						<div class="hand hover-red gray text-lg">品牌闪购</div>
						<div class="hand hover-red gray text-lg">拍卖</div>
						<div class="hand hover-red gray text-lg">家电数码</div>
						<div class="hand hover-red gray text-lg">超市日用</div>
						<div class="hand hover-red gray text-lg">蔬果生鲜</div>
						<div class="hand hover-red gray text-lg">国际好货</div>
						<div class="hand hover-red gray text-lg">潮流服饰</div>
					</div>
				</div>
				<div class="search-bar-right"></div>
			</div>
			<!--  /搜索栏  -->

			<!--  正文内容  -->
			<div class=" mt-10 py-10">
			</div>	
			<!--  /正文内容  -->

			<!--  页脚  -->
			<div class="footer">
				<div class="containner">
					<div class="flex justify-between">
						<div class="footer-left flex">
							<div class="footer-list">
								<div class="footer-list-title">学掌门商城</div>
								<div class="footer-list-text">中国买家用户使用得更多的商城平台</div>
								<div class="footer-list-text">学掌门平台打造的<span class="red">"网购神器"</span></div>
								<div class="footer-list-text"><span class="red">60,000</span> 多个专业领域</div>
								<div class="footer-list-text"><span class="red">600,000</span> 多个品牌</div>
								<div class="footer-list-text"><span class="red">760,000,000</span> 个商品</div>
								<div class="footer-list-text"><span class="red">38,000</span> 多个分类</div>
							</div>

							<div class="footer-list">
								<div class="footer-list-title">关于我们</div>
								<div class="footer-list-text">关于学掌门</div>
								<div class="footer-list-text">隐私政策</div>
								<div class="footer-list-text">商城平台服务协议</div>
								<div class="footer-list-text">网络信息侵权通知指引</div>
								<div class="footer-list-text">学掌门商城服务监督员</div>
								<div class="footer-list-text">网站地图</div>
								<div class="footer-list-text">联系我们</div>
							</div>

							<div class="footer-list">
								<div class="footer-list-title">Vip服务</div>
								<div class="footer-list-text">商品攻略 免费体验</div>
								<div class="footer-list-text">商品问答 评估指南</div>
								<div class="footer-list-text">专业咨询 海量宝贝</div>
								<div class="footer-list-text">偏好设置 随机抽奖</div>
								<div class="footer-list-text">自动评论 账单统计</div>
								<div class="footer-list-text">消费分析 APP下载</div>
								<div class="footer-list-text">特价秒杀 发现更多</div>
							</div>
						</div>

						<div class="footer-right flex">
							<div class="footer-list-right">
								<img src="img/index_bottom_wechat.png" />
								<div class="footer-list-title">学掌门APP</div>
								<div class="footer-list-title">扫描立即下载</div>
							</div>
							<div class="footer-list-right">
								<img src="img/index_bottom_wechat.png" />
								<div class="footer-list-title">学掌门商城</div>
								<div class="footer-list-title">订阅号</div>
							</div>
							<div class="footer-list-right">
								<img src="img/index_bottom_wechat.png" />
								<div class="footer-list-title">学掌门商城</div>
								<div class="footer-list-title">官方服务号</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--  /页脚  -->

		</div>
	</body>
</html>
